﻿<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="Scripts/jquery-1.7.1.js"></script>
    <script src="Scripts/jquery-1.7.1.min.js"></script>
    <style>
        /* item-selector */

        #item-selector {
            margin: 0 auto;
            width: 220px;
            overflow: hidden;
            border: 2px solid #ccc;
        }

            #item-selector .title {
                border-bottom: 1px solid #ccc;
                overflow: hidden;
            }

                #item-selector .title div {
                    width: 190px;
                    border: 0px;
                    color: #999;
                    font-family: arial;
                    font-size: 14px;
                    height: 28px;
                    line-height: 28px;
                    float: left;
                    cursor: pointer;
                }

                #item-selector .title span {
                    display: block;
                    height: 30px;
                    line-height: 30px;
                    width: 29px;
                    float: left;
                    text-align: center;
                    border-left: 1px solid #ccc;
                    cursor: pointer;
                }

            #item-selector .content {
                width: 220px;
                overflow: hidden;
            }

                #item-selector .content .items {
                    overflow: hidden;
                }

                    #item-selector .content .items div {
                        padding-left: 20px;
                        width: 200px;
                        height: 32px;
                        line-height: 32px;
                        font-family: "微软雅黑";
                        font-size: 14px;
                        font-weight: bold;
                        cursor: pointer;
                    }

        .item-hover {
            background: #3385ff;
            color: #fff;
        }
    </style>
    <script>
        $(document).ready(function () {
            var itemSelector = new ItemSelector($("#item-selector"), {
                currentText: "下拉框咯",
                items: [
                    {
                        text: "JavaScript",
                        value: "js",
                        disabled: "1"
                    },
         {
             text: "Css",
             value: "css",
             disabled: "0"
         },
          {
              text: "Html",
              value: "html",
              disabled: "0"
          }
                ],
            });
            itemSelector.init();
        });

        function ItemSelector(elem, opts) {
            this.elem = elem;
            this.opts = opts;
        };
        var ISProto = ItemSelector.prototype;
        ISProto.getElem = function () {
            return this.elem;
        };
        ISProto.getOpts = function () {
            return this.opts;
        };
        /* data manip*/
        ISProto._setCurrent = function (current) {
            this.getOpts()["current"] = current;
        };
        ISProto.getCurrentValue = function (current) {
            return this.getOpts()["current"];
        };
        /* data manip*/
        ISProto.init = function () {
            var that = this;
            this.getOpts()["current"] = null; // 数据游标
            this._setItemValue(this.getOpts()["currentText"]);
            var itemsElem = that.getElem().find(".content .items");
            this.getElem().find(".title div").on("click", function () {
                itemsElem.toggle();
            });
            this.getElem().find(".title span").on("click", function () {
                itemsElem.toggle();
            });
            $.each(this.getOpts()["items"], function (i, item) {
                item["id"] = (new Date().getTime()).toString();
                that._render(item);
            });
        };
        ISProto._setItemValue = function (value) {
            this.getElem().find(".title div").text(value)
        };
        ISProto._render = function (item) {
            var that = this;
            var itemElem = $("<div></div>")
            .text(item["text"])
            .attr("id", item["id"]);
            if ("0" == item["disabled"]) {
                itemElem.on("click", function () {
                    var onChange = that.getOpts()["change"];
                    that.getElem().find(".content .items").hide();
                    that._setItemValue(item["text"]);
                    that._setCurrent(item);
                    onChange && onChange(item);
                })
                .mouseover(function () {
                    $(this).addClass("item-hover");
                })
                .mouseout(function () {
                    $(this).removeClass("item-hover");
                });
            }
            else {
                itemElem.css("color", "#ccc").on("click", function () {
                    that.getElem().find(".content .items").hide();
                    that._setItemValue(item["text"]);
                });
            }
            itemElem.appendTo(this.getElem().find(".content .items"));
        };
    </script>
</head>
<body>
    <div class="dxj-ui-bd">
        <div id="item-selector">
            <div class="title">
                <div></div>
                <span>↓</span>
            </div>
            <div class="content">
                <div class="items">
                </div>
            </div>
        </div>
    </div>
</body>
</html>
